<template>
  <div class="wrap">
    <van-nav-bar title="智能家居"
                 left-text=""
                 left-arrow
                 @click-left="onClickLeft" />
    <home-host :data="host"
               class="smart-host"></home-host>
    <div class="title-box">手动场景</div>
    <smart-scene v-for="(item,index) of hostStatus"
                 :key="index"
                 :data="item"
                 class="item"></smart-scene>
    <div class="title-box">智能设备</div>
    <div class="item-box">
      <smart-item v-for="(item,index) of smartElect"
                  :key="index"
                  :data="item"
                  class="item"></smart-item>
    </div>
    <img class="bg-img"
         src="../../assets/images/PropertyPageImages/NoticeImg1.jpeg">
  </div>
</template>

<script>
import SmartItem from '@/components/Property/SmartItem'
import HomeHost from '@/components/Property/HomeHost'
import SmartScene from '@/components/Property/SmartScene'
export default {
  components: { SmartItem, HomeHost, SmartScene },
  name: 'SmartHome',
  data () {
    return {
      index: 1,
      smartElect: [{
        titleText: '720全效空气净化器',
        status: '未开启',
        locate: '厨房',
        imgUrl: require('@/assets/images/PropertyPageImages/air.png'),
        iconColor: '#999',
        statusStyle: 'color:#999;border: solid 1px #999;'
      }, {
        titleText: '小米小爱智能音响',
        status: '未开启',
        locate: '浴室',
        imgUrl: require('@/assets/images/PropertyPageImages/xiaomiSound.png'),
        iconColor: '#999',
        statusStyle: 'color:#999;border: solid 1px #999;'
      }, {
        titleText: '华为智能手表',
        status: '未开启',
        locate: '卧室',
        imgUrl: require('@/assets/images/PropertyPageImages/huaweiWatch.png'),
        iconColor: '#999',
        statusStyle: 'color:#999;border: solid 1px #999;'
      }, {
        titleText: 'HUAWEI路由Q2',
        status: '未开启',
        locate: '客厅',
        imgUrl: require('@/assets/images/PropertyPageImages/huaweiRouter.png'),
        iconColor: '#999',
        statusStyle: 'color:#999;border: solid 1px #999;'
      }, {
        titleText: '海雀AI摄像头',
        status: '未开启',
        locate: '玄关',
        imgUrl: require('@/assets/images/PropertyPageImages/aiCamara.png'),
        iconColor: '#999',
        statusStyle: 'color:#999;border: solid 1px #999;'
      }],
      host: {
        host: 'Lily',
        facilityNum: 5,
        sceneNum: 2
      },
      hostStatus: [{
        status: '回家'
      }, {
        status: '离家'
      }]
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
.wrap {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 90vh;
}
.bg-img {
  z-index: -1;
  position: absolute;
  top: 10px;
  width: 100vw;
  height: 100vh;
}
.item {
  display: inline-block;
  margin-bottom: 10px;
  margin-left: 15px;
}
.title-box {
  margin-bottom: 5px;
  margin-left: 25px;
  font-size: 14px;
  color: #fff;
}
.smart-host {
  margin-bottom: 20px;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}
</style>
